<template>
  <div class="container">
    <card title="期货推送">
      <button class="button is-primary" slot="right" @click="toLoan">贷款推送</button>
      <transition-group class="head" type="transition" name="h-fade">
        <form-item label="App" key="app">
          <el-select v-model="source_app" placeholder="请选择App">
            <el-option
              v-for="item in apps"
              :key="item.source_app"
              :label="item.app_name"
              :value="item.source_app">
            </el-option>
          </el-select>
        </form-item>
        <form-item label="用户IDFA" key="some">
          <textarea class="textarea" placeholder="多个IDFA用','隔开" v-model="tIdfa"></textarea>
        </form-item>
        <form-item label="推送内容" key="content" class="test">
          <textarea class="textarea" placeholder="请输入您想推送的内容" v-model="content"></textarea>
        </form-item>
        <div class="button-box form-item test" key="button">
          <button class="button is-primary" :class="{'is-loading': isPushing}" @click="submit">提交</button>
        </div>
      </transition-group>
    </card>
  </div>
</template>

<script>
import { FormItem } from '@/components/Common'
import { mapGetters } from 'vuex'
export default {
  name: 'push',
  components: {
    FormItem
  },
  created () {
    this.$api.get('assistant/opening?param=push&sourceType=futures').then(req => {
      this.apps = req || []
      if (this.apps.length > 0) {
        this.source_app = this.apps[0].source_app
      }
    })
  },
  computed: {
    ...mapGetters({
      string: 'global/string'
    }),
    tIdfa: {
      get () {
        return this.idfas.join(',')
      },
      set (val) {
        this.idfas = val.split(',')
      }
    }
  },
  data () {
    return {
      isPushing: false,
      source_app: '',
      apps: [],
      idfas: [],
      content: ''
    }
  },
  methods: {
    toLoan () {
      this.$router.push('/push')
    },
    submit () {
      if (this.content === '') {
        this.$openMessage({message: '请输入推送内容'})
        return
      }
      let param = {
        source_app: this.source_app,
        content: this.content
      }
      param.idfas = this.idfas.filter(item => item !== '')
      this.isPushing = true
      this.$api.post('jpush', param).then(req => {
        this.isPushing = false
        this.$openMessage({message: '推送成功', type: 'success'})
      }).catch(() => {
        this.isPushing = false
        this.$openMessage({message: '推送失败'})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.head{
  padding: 20px;
}
.button-box{
  display: flex;
  justify-content: center;
}
.test {
  transition: transform 0.5s;
}
</style>

